<template>
    <div class="content-main">
        <div class="breadcrumb">
            <div class="breadcrumb-icon">
                <img src="./../../assets/images/breadcrumb_icon.png" />
            </div>
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>授课管理</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="content-box">
            <div class="search-box">
                <div class="search-item">
                    <span class="search-title">案例名称: </span>
                    <el-select
                        v-model="projectValue"
                        placeholder="请选择班级"
                        value-key="value"
                        style="float:left;">
                        <el-option
                        v-for="item in projectStatus"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </div>
                <div class="search-item">
                    <span class="search-title">教师信息: </span>
                    <el-input v-model="teacherInfo"  placeholder="请输入教师信息" style="float:left; width:auto;" :maxlength="20"></el-input>
                </div>
                <div class="search-item">
                    <el-button type="primary" @click="searchFn">搜索</el-button>
                </div>
            </div>
            <div class="table-content" v-loading="tableLoading">
                <el-table
                :data="tableData"
                border
                style="width: 100%">
                    <el-table-column label="序号" width="100px">
                        <template slot-scope="scope"><span>{{scope.$index+(currentPage - 1) * pagesize + 1}}</span> </template>
                    </el-table-column>
                    <el-table-column  prop="projectName" label="案例名称">
                    </el-table-column>
                    <el-table-column  prop="userName" label="授课教师">
                    </el-table-column>
                    <el-table-column  prop="userNumber" label="教师工号">
                    </el-table-column>
                    <el-table-column  prop="className" label="班级">
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button type="text" size="small" @click="untiedFn(scope.row.userId,scope.row.classId,scope.row.projectId)">解绑授课信息</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-size="pagesize"
                    layout="total, prev, pager, next, jumper"
                    :total="totalCount"
                    style="margin-top: 20px; text-align: center;">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                projectStatus: [
                    {
                        value: '',
                        label: '全部'
                    }
                ],
                teacherInfo:'',
                projectValue: '',
                tableLoading: false,
                tableData: [],
                currentPage: 1,
                pagesize: 10,
                totalCount: 1000
            }
        },
        created () {
            this.init() //初始化
        },
        methods: {
            init() {
                let self = this
                self.$http.post('/dataplatform/system/class/getReleaseProjectList?type=2').then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                        for(let i = 0; i < res.data.length; i++){
                            let selectJson = {}
                            selectJson.label = res.data[i].name
                            selectJson.value = res.data[i].id
                            self.projectStatus.push(selectJson)
                        }
                        self.teachList()
                    }else if(res.code == '401'){
                        self.$router.replace({
                            path:'/login'
                        })
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            teachList(){
                let self = this
                self.$http.get('/dataplatform/system/manager/getTeachList?pageNum='+self.currentPage +'&pageSize='+self.pagesize + '&projectId='+self.projectValue + '&userInfo='+self.teacherInfo ).then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                        self.tableData = res.data.list
                        self.totalCount = res.data.total
                    }else if(res.code == '401'){
                        self.$router.replace({
                            path:'/login'
                        })
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            //表格分页
			handleSizeChange: function (size) {
				this.pagesize = size;
			},
			handleCurrentChange: function(currentPage) {
                this.currentPage = currentPage
                this.teachList()
            },
            //搜索
            searchFn(){
                this.currentPage = 1
                this.teachList()
            },
            //解绑授课信息
            untiedFn(userId,classId,projectId) {
                let self = this
                self.$confirm('是否解绑授课信息?', '提示', {
                    confirmButtonClass: 'el-button--warning'
                }).then(() => {
                    self.$http.get('/dataplatform/system/manager/unbindTeachRelation?userId='+userId+'&classId='+classId+'&projectId='+projectId).then((response) => {
                        let res = response.data
                        if(res.code == '200'){
                            self.$message({
                                message: '解绑授课成功',
                                type: 'success'
                            })
                            self.teachList()
                        }else if(res.code == '401'){
                            self.$router.replace({
                                path:'/login'
                            })
                        }else{
                            self.$message.error(res.message)
                        }
                    })
                }).catch(() => {})
            }
        }
    }
</script>
